<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>订单管理</el-breadcrumb-item>
	     <el-breadcrumb-item>我的订单</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
		    <el-col :span="7" >
				<el-input placeholder="请输入订单ID"  v-model="searchQuery">
				<el-button slot="append" icon="el-icon-search" @click="handleSearch()" >搜索</el-button>
				</el-input>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="dialogVisible = true">添加订单信息</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="ordersList">订单列表</el-button>
			</el-col>
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="250">
	       <el-table-column
	         fixed
	         prop="orderID"
	         label="订单号"
	         width="160">
	       </el-table-column>
	       <el-table-column
	         prop="productID"
	         label="商品编号"
	         width="200">
	       </el-table-column>
		   <el-table-column
		     prop="memberID"
		     label="会员编号"
		     width="200">
		   </el-table-column>
	       <el-table-column
	         prop="quantity"
	         label="数量"
	         width="160">
	       </el-table-column>
		   <el-table-column
	         prop="totalAmount"
	         label="总价"
	         width="160">
	       </el-table-column>
		   <el-table-column
		     prop="orderDate"
		     label="交易时间"
		     width="220">
		   </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
	           <el-button
	            @click="deleteRow(scope.row.orderID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	         </template>
	       </el-table-column>
	     </el-table>
	   <!--文本框-->
	   <el-dialog
	     title="添加订单信息"
	     :visible.sync="dialogVisible"
	     width="40%"
	     :before-close="handleClose">
		 <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
		   <!-- <el-form-item label="订单号" prop="orderID">
		     <el-input v-model="ruleForm.orderID"></el-input>
		   </el-form-item> -->
		   <el-form-item label="商品编号" prop="productID">
				<el-input v-model="ruleForm.productID"></el-input>
		   </el-form-item>
		   <el-form-item label="会员编号" prop="memberID">
		     <el-input v-model="ruleForm.memberID"></el-input>
		   </el-form-item>
		   <el-form-item label="数量" prop="quantity">
		     <el-input v-model="ruleForm.quantity"></el-input>
		   </el-form-item>
		   <el-form-item label="总价" prop="totalAmount">
		     <el-input v-model="ruleForm.totalAmount"></el-input>
		   </el-form-item>
		   <el-form-item label="交易时间"prop="orderDate">
				<el-col :span="11">
				  <el-form-item prop="date1">
				    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.orderDate" style="width: 100%;">
					</el-date-picker>
				  </el-form-item>
				</el-col>
		   </el-form-item>
		 </el-form>
	     <span></span>
	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="handleSubmit()">确 定</el-button>
	     </span>
	   </el-dialog>
	   
   </div>
   
</template>
<script>
	export default{
		name: 'HomeView',
		components: {
		
		},
		data(){
			return {
				
				searchQuery:'',
				
				ruleForm: {
					orderID:'',
					productID: '',
					quantity: '',
					memberID: '',
					totalAmount: '',
					orderDate:''
				},
				
			        goods: 5,
					dialogVisible:false,
					labelPosition: 'right',
			        form:{
						name: '',  
						category: '', 
						sale: '',  
						number:'',
						data: '',
						numname:''
			        },
					rules:{  
					    name: [  
					            { required: true, message: '请输入订单号', trigger: 'blur' },  
					            { min: 3, max: 10, message: '订单号长度在 3 到 10 个字符', trigger: 'blur' }  
					          ],  
					          category: [  
					            { required: true, message: '请选择商品编号', trigger: 'change' }  
					          ],  
					          sale: [  
					            { required: true, message: '请输入总价', trigger: 'blur' },  
					          
					          ],  
					          number: [  
					            { required: true, message: '请输入数量', trigger: 'blur' },  
					          ],  
					          numname: [  
					            { required: true, message: '请输入会员编号', trigger: 'blur' },  
					          ],  
					          data: [  
					            { required: true, message: '请选择交易时间', trigger: 'change' }  
					          ]  
					},  
					tableData:[]
			      };
		},
		methods: {
			
			
			handleSearch() {
				
				let params = {
				    orderID: this.searchQuery 
				};  
				
					this.axios.get("OrdersSearchById",{params:params})
					.then(
						response=>{
							this.tableData=response.data.data;
							console.log(this.tableData)
							if (response.data.code === 200) {
								this.$message({
								  message: response.data.message,  
								  type: 'success'  
								});  
								
							}else{
								this.$message({
								  message: response.data.message,  
								  type: 'warning' 
								  });  
							}
						}
					)
					.catch(error => {
					        console.error(error);  
					        this.$message({  
					        message: error.response.data.message,  
					        type: 'error'  
					        });  
					    });  
			},
			
			ordersList(){
				this.axios.post('OrdersList', {})
				.then(response => {
									this.tableData=response.data.data.list;
				 })
				.catch(error => {
				   console.error(error);
				 });
			},
			
		    deleteRow(id) {
		      this.axios.get("OrdersRemove",{
		          params: {
		            orderID: id
		          }
		        })
		      .then(
		      	response=>{
		      		this.ordersList();
		      		console.log(response.data);
		      			this.$message.success('删除成功'); 
		      	}
		      )
		      .catch(error => {
		         console.error(error);
		       });
		    				},
			handleSubmit() {  
			        
			         this.axios.post('OrdersAdd', this.ruleForm)
			        			
			        .then(response => {
			           console.log(response.data);
			        			 // this.getProductsInfo();
			        			  this.$message.success('添加成功'); 
			         })
			        			
			        			
			        .catch(error => {
			           console.error(error);
			         });
					 
			},
			
			
			resetForm() {  
			      this.$refs.orderForm.resetFields();   
			}
		},
			
	}
</script>

<style lang ="less" scoped>


</style>